<template>
  <div>
    <el-input v-model="getTitle" readonly placeholder="请选择任务项">
      <el-button slot="append" icon="el-icon-search" @click="open = true"></el-button>
    </el-input>
    <el-dialog title="选择任务项" :visible.sync="open" append-to-body width="800px">
      <el-table :data="workList">
        <el-table-column label="编号" prop="workItemId"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="指派人" prop="assignee">
          <template #default="{ row }">
            <user-and-avatar :user-id="row.assignee"></user-and-avatar>
          </template>
        </el-table-column>
        <el-table-column label="故事点数" prop="storyPoints"></el-table-column>
        <el-table-column label="" prop="storyPoints">
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="ok(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {listAllWork} from "@/api/projectUser/userWork";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";

export default {
  name: "workSelectList",
  components: {UserAndAvatar},
  props: {
    projectId: [String, Number],
    value: [String, Number],
  },
  data() {
    return {
      open: false,
      workList: []
    }
  },
  computed: {
    getTitle() {
      if (this.value && this.workList) {
        const work = this.workList.find(item => item.workItemId === this.value)
        return work ? work.title : ''
      }
      return ''
    }
  },
  created() {
    this.getWorkList()
  },
  methods: {
    getWorkList() {
      listAllWork(this.projectId).then(res => {
        this.workList = res.data
      })
    },
    ok(row) {
      console.log(row.workItemId);
      this.open = false
      this.$emit('input', row.workItemId)
    }
  }
}
</script>
<style scoped lang="scss">

</style>
